import React, { Component } from "react";

export default class App extends Component {
  state = {
    myHtml: `
        <div class="slide-page" style="width: 700px;" data-index="0">
        
        <a class="item" target="_blank" href="https://movie.douban.com/subject/34880018/?tag=热门&amp;from=gaia_video">
        
            <div class="cover-wp" data-isnew="false" data-id="34880018">
                <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2895351514.jpg" alt="茶啊二中" data-x="2000" data-y="2746">
                
            </div>
            <p>
                

                茶啊二中

                
                    <strong>7.5</strong>
                
            </p>
        </a>
    
        
        <a class="item" target="_blank" href="https://movie.douban.com/subject/26746801/?tag=热门&amp;from=gaia_video">
        
            <div class="cover-wp" data-isnew="false" data-id="26746801">
                <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2892025156.jpg" alt="暗杀风暴" data-x="2000" data-y="2800">
                
            </div>
            <p>
                

                暗杀风暴

                
                    <strong>5.9</strong>
                
            </p>
        </a>
    
        
        <a class="item" target="_blank" href="https://movie.douban.com/subject/36181528/?tag=热门&amp;from=gaia">
        
            <div class="cover-wp" data-isnew="true" data-id="36181528">
                <img src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2897156061.jpg" alt="戏剧训练营" data-x="1334" data-y="2000">
                
            </div>
            <p>
                
                    <span class="green">
                        <img src="https://img1.doubanio.com/f/movie/caa8f80abecee1fc6f9d31924cef8dd9a24c7227/pics/movie/ic_new.png" width="16" class="new">
                    </span>
                

                戏剧训练营

                
                    <strong>7.7</strong>
                
            </p>
        </a>
    
        
        <a class="item" target="_blank" href="https://movie.douban.com/subject/35970310/?tag=热门&amp;from=gaia">
        
            <div class="cover-wp" data-isnew="true" data-id="35970310">
                <img src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2883290473.jpg" alt="1刑的乌鸦 电影版" data-x="750" data-y="1061">
                
            </div>
            <p>
                
                    <span class="green">
                        <img src="https://img1.doubanio.com/f/movie/caa8f80abecee1fc6f9d31924cef8dd9a24c7227/pics/movie/ic_new.png" width="16" class="new">
                    </span>
                

                1刑的乌鸦 电影版

                
                    <strong>6.0</strong>
                
            </p>
        </a>
    
        
        <a class="item" target="_blank" href="https://movie.douban.com/subject/36133787/?tag=热门&amp;from=gaia">
        
            <div class="cover-wp" data-isnew="true" data-id="36133787">
                <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2897740776.jpg" alt="孤立无援" data-x="2025" data-y="3000">
                
            </div>
            <p>
                
                    <span class="green">
                        <img src="https://img1.doubanio.com/f/movie/caa8f80abecee1fc6f9d31924cef8dd9a24c7227/pics/movie/ic_new.png" width="16" class="new">
                    </span>
                

                孤立无援

                
                    <strong>6.2</strong>
                
            </p>
        </a>
    
        
        <a class="item" target="_blank" href="https://movie.douban.com/subject/30391109/?tag=热门&amp;from=gaia">
        
            <div class="cover-wp" data-isnew="false" data-id="30391109">
                <img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2895433340.jpg" alt="蓝甲虫" data-x="2024" data-y="3000">
                
            </div>
            <p>
                

                蓝甲虫

                
                    <strong>4.7</strong>
                
            </p>
        </a>
    
        
        <a class="item" target="_blank" href="https://movie.douban.com/subject/10604086/?tag=热门&amp;from=gaia_video">
        
            <div class="cover-wp" data-isnew="false" data-id="10604086">
                <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2895465725.jpg" alt="封神第一部：朝歌风云" data-x="6313" data-y="8838">
                
            </div>
            <p>
                

                封神第一部：朝歌风云

                
                    <strong>7.9</strong>
                
            </p>
        </a>
    
        
        <a class="item" target="_blank" href="https://movie.douban.com/subject/35802912/?tag=热门&amp;from=gaia">
        
            <div class="cover-wp" data-isnew="false" data-id="35802912">
                <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2897807305.jpg" alt="复仇狗联盟" data-x="2587" data-y="3622">
                
            </div>
            <p>
                

                复仇狗联盟

                
                    <strong>7.3</strong>
                
            </p>
        </a>
    
        
        <a class="item" target="_blank" href="https://movie.douban.com/subject/36065691/?tag=热门&amp;from=gaia">
        
            <div class="cover-wp" data-isnew="false" data-id="36065691">
                <img src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2898000573.jpg" alt="回应我" data-x="947" data-y="1420">
                
            </div>
            <p>
                

                回应我

                
                    <strong>6.3</strong>
                
            </p>
        </a>
    
        
        <a class="item" target="_blank" href="https://movie.douban.com/subject/34963356/?tag=热门&amp;from=gaia">
        
            <div class="cover-wp" data-isnew="false" data-id="34963356">
                <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2897238625.jpg" alt="过往人生" data-x="2000" data-y="3000">
                
            </div>
            <p>
                

                过往人生

                
                    <strong>7.7</strong>
                
            </p>
        </a>
    </div>
        `,
  };
  render() {
    return (
      <div>
        <h1>11-danger-html</h1>
        <div
          dangerouslySetInnerHTML={{
            __html: this.state.myHtml,
          }}
        ></div>
      </div>
    );
  }
}
